<template>
  <view class="course-link">
    <view class="course-content">
      <img class="icon-img" :src="dataInfo.pathUrl" />
      <view class="title">{{ dataInfo.title }}</view>
      <view class="teacher">讲师：{{ dataInfo.teacher }}</view>
      <view class="course-footer">
        <text>课程链接：</text>
        <view class="lick">{{ dataInfo.courseLink }}</view>
      </view>
    </view>
    <view class="copy">
      <up-icon name="star-fill" color="#999999" size="35"></up-icon>
      <view class="copy-button">
        <up-copy :content="dataInfo.courseLink">
          <up-button color="#0066ff" type="primary">复制链接</up-button>
        </up-copy></view
      >
    </view>
  </view>
</template>
<script setup lang="ts">
const dataInfo = ref<any>({
  pathUrl:
    "https://img2.baidu.com/it/u=856722127,2758625664&fm=253&fmt=auto&app=138&f=JPEG?w=543&h=500",
  title: "植保无人机作业实战",
  teacher: "张教授",
  courseLink:
    "https://inews.gtimg.com/om_bt/Otvjht3x4wA58ZkSIxSo88NZTsyD6ZdUyiLMHZmGFoHokAA/641",
});
</script>
<style lang="scss" scoped>
.course-link {
  margin: 20px 10px;
  .course-content {
    border-radius: 6px;
    padding: 20px;
    background-color: #f5f5f5;
    .icon-img {
      width: 100%;
      height: 300px;
      border-radius: 6px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      margin-top: 10px;
    }
    .teacher {
      padding: 6px 0;
    }
    .course-footer {
      .lick {
        color: #1677ff;
        word-break: break-all;
        font-size: 14px;
        padding-top: 5px;
      }
    }
  }
  .copy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
    margin-top: 30px;
    .copy-button {
      width: 100%;
      margin: 0 10px;
    }
  }
}
</style>
